<template>
	<zui-box>

		<!-- 头部导航 -->
		<!-- <zui-navbar title='支付成功'></zui-navbar> -->
		
		<view class="navbar" >
		<!-- 带回首页按钮 -->
			<u-navbar :fixed="true" title=" " @leftClick="xz_home('index')" bgColor="rgb(131, 28, 25)" :safeAreaInsetTop="true"  title-color="white">
				<view class="u-nav-slot" slot="left">
					<u-icon  color="#ffffff" name="home" size="20"></u-icon>
				</view>
				<view class="title" slot="center">
					支付成功
				</view>
			</u-navbar>
		</view>
			
			
		<u-gap height="62rpx"></u-gap>
		<view class="image">
			<image src="~@/static/img/pay_win.png" mode=""></image>
		</view>
		<u-gap height="32rpx"></u-gap>
		<view class="big_title">
			购买成功！
		</view>
		<u-gap height="30rpx"></u-gap>
		<view class="sm_title">
			订单号：{{info.order_sn}}
		</view>
		<u-gap height="126rpx"></u-gap>
		
		<view class="both_ends">
			<view class="both">
				手机号：
			</view>
			<view class="ends">
				{{address.phone}}
			</view>
		</view>
		<u-gap height="64rpx"></u-gap>
		<view class="both_ends">
			<view class="both">
				姓名：
			</view>
			<view class="ends">
				{{address.name}}
			</view>
		</view>
		<u-gap height="64rpx"></u-gap>
		<view class="both_ends">
			<view class="both">
				实付金额：
			</view>
			<view class="ends">
				{{info.actual_price}}
			</view>
		</view>
	
		<u-gap height="180rpx"></u-gap>

		<view class="btn_arr">
			<button class="btn_quan" @click="xz_home('index')">返回首页</button>
			<button class="btn_quan" @click="buy_fun()">查看订单</button>
		</view>


	</zui-box>
</template>

<script>
	export default {
		data() {
			return {
				order_id: "",//商品名称
				address:'',//地址信息
				info: '',
				module_id:'',//商品类型
				order_type:1,//商品类型
			};
		},
		//页面加载完毕
		onLoad(e) {
			console.log(e);
			this.order_id = e.order_id;
		},
		//每次进入页面
		onShow() {
			this.get_info();
		},
		methods: {
			get_info(){
				
				// 获取页面订单信息
				uni.$u.http.get('/app/order_integral/detail', {
					params: {
						order_id:this.order_id
					},
					custom: {
						auth: true,
						toast: false,
						catch: false,
					},
				}).then(res => {
					this.info = res;
					this.address  = res.address;
					this.order_type = res.order_type;
				
				}).catch(err => {
				
				})
				
			},
			buy_fun(){
				//复购商品
				
					uni.$u.route('pages/integral/order_list');
			},
			

		}
	}
</script>

<style lang='scss' scoped>
	.image {
		width: 624rpx;
		height: 262rpx;
		margin: 0 auto;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.big_title {
		color: #333;
		font-size: 48rpx;
		text-align: center;
	}

	.sm_title {
		color: #333;
		font-size: 26rpx;
		text-align: center;
	}

	.both_ends {
		padding: 0 60rpx;
		display: flex;
		justify-content: space-between;
		color: #333;
		font-size: 26rpx;

		.both {}

		.ends {
			color: #333;
		}
	}

	.btn_arr {
		display: flex;
		padding: 32rpx;
		justify-content: space-between;

		button {
			width: 334rpx;
			padding: 20rpx 50rpx 20rpx 50rpx;
			display: inline-block;
			margin: 0;
			background-color: #BE1B1C;
			color: #FFFFFF;
			font-size: 30rpx;
			font-weight: 400;
			line-height: 1.5;
		}

		.btn {
			width: 240rpx;
			padding: 0 !important;
			height: 80rpx;
			line-height: 80rpx !important;
		}

		.btn_quan {
			border-radius: 198rpx !important;
			width: 334rpx;
			background: #E63A2A;
		}

		button:nth-of-type(1) {
			background: #858690;
		}

		button:nth-of-type(2) {
			background: #AA334F
		}
	}
	
	
	/* //自定义顶部栏 */
	.navbar {
		font-size: 30rpx;
		/deep/.title {
			color: #fff;
		}
		/deep/.u-icon {
			padding: 10rpx;
			border-radius: 50%;
			// background:rgba(35 ,159 ,229,0.85);
		}
		.right_text{
			color: #fff;
		}
	}
	.have_bg{
		background: orangered;
	}
	
	
</style>
